<template>
  <div class="filters-container">
    <el-form
      :inline="true"
      :model="filterData"
      size="small"
      class="filter-form-inline"
    >
      <el-row
        :gutter="20"
        style="width:100%;margin-left: 0px; margin-right: 0px"
      >
        <el-col
          :xs="3"
          :lg="4"
          style="max-width: 50%"
        >
          <el-form-item
            label="状态"
            style="width:100%"
            prop="creditStatus"
          >
            <el-select
              v-model="filterData.creditStatus"
              clearable
              style="width: 100%"
              placeholder="选择状态"
              @change="handlSearch"
              @clear="creditStatusClear"
            >
              <el-option
                v-for="(item, idx) in creditStatusOptions"
                :key="item.id"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
        </el-col>
        <el-col
          :xs="3"
          :lg="5"
          style="max-width: 50%"
        >
          <el-form-item
            label="代理名称"
            style="width:100%"
            prop="keyWord"
          >
            <el-input
              v-model="filterData.keyWord"
              placeholder="请输入代理名称"
            />
          </el-form-item>
        </el-col>
        <!--
        <el-col
          :xs="3"
          :lg="4"
          style="max-width: 50%"
        >
          <el-form-item
            label="负责销售职员"
            style="width:100%"
            prop="headId"
          >
            <el-select
              v-model="filterData.headId"
              clearable
              style="width: 100%"
              placeholder="负责营销职员"
              @change="handlSearch"
              @clear="officeClerkClear"
            >
              <el-option
                v-for="(item, idx) in officeClerkOption"
                :key="item.id"
                :label="item.realName"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
        </el-col>
        -->
        <el-col
          :xs="2"
          :lg="3"
          style="max-width: 140px"
        >
          <el-form-item style="width:140px">
            <el-button
              class="border-btn"
              @click="handlReset"
            >重置</el-button>
            <el-button
              type="primary"
              class="main-btn"
              @click="handlSearch"
            >搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
  </div>
  <table-view
    header-cell-class-name="table-header"
    :data="listData"
    border
    :cell-style="cellStyle"
    @row-click="rowClick"
  >
    <el-table-column
      prop="agentNumber"
      label="代理编号"
      fixed="left"
      :min-width="160"
      show-overflow-tooltip
      header-align="center"
    />
    <el-table-column
      prop="agentName"
      label="代理名称"
      fixed="left"
      header-align="center"
      :min-width="200"
      show-overflow-tooltip
    />
    <el-table-column
      :min-width="160"
      show-overflow-tooltip
      prop="region"
      label="企业所在地区"
      header-align="center"
    >
      <template #default="scope">
        <span v-if="scope.row.provinceName">{{ scope.row.provinceName }}</span>
        <span v-if="scope.row.cityName"> / {{ scope.row.cityName }}</span>
        <span v-if="scope.row.areaName"> / {{ scope.row.areaName }}</span>
      </template>
    </el-table-column>
    <el-table-column
      :min-width="160"
      show-overflow-tooltip
      label="应收最大额度（元）"
      align="center"
      header-align="center"
    >
      <template #default="scope">
        <span v-if="scope.row.creditInfo"> {{ scope.row.creditInfo?.quota>0?scope.row.creditInfo?.quota:'不限额' }}</span>
        <span v-else>未设置</span>
      </template>
    </el-table-column>
    <el-table-column
      label="状态"
      :min-width="120"
      show-overflow-tooltip
      header-align="center"
      align="center"
      fixed="right"
    >
      <template #default="scope">
        <credit-status :data="scope.row" />
      </template>
    </el-table-column>
    <el-table-column
      label="操作"
      fixed="right"
      header-align="center"
      :min-width="100"
    >
      <template #default="scope">
        <template v-if="scope.row.creditInfo">
          <el-button
            v-auth="{v:['crm:internalControl:finance:credit'], bool: scope.row.creditInfo.creditStatus==='1'}"
            type="text"
            @click="creditSetting(scope.row)"
          >调整信用</el-button>
        </template>
        <template v-if="!(scope.row.creditInfo&&scope.row.creditInfo.creditStatus==='1')">
          <el-button
            v-auth="{v:['crm:internalControl:finance:credit']}"
            type="text"
            @click="creditSetting(scope.row)"
          >设置信用</el-button>
        </template>
      </template>
    </el-table-column>
  </table-view>
  <Pagination
    v-model:page="filterData.page"
    v-model:limit="filterData.pageSize"
    style="display: flex; justify-content: flex-end"
    :total="total"
    @pagination="handlList"
  />
  <agent-credit-setting
    ref="creditSettingRef"
    :mode-id="rowData?.id"
    :mode="mode"
    @on-success="handlList"
  />
</template>

<script>
import {
  defineAsyncComponent,
  getCurrentInstance,
  inject,
  onMounted,
  reactive,
  ref,
  toRefs,
} from 'vue'
import { useRouter } from 'vue-router'
import { crmStore } from '@CRM/store'

export default {
  components: {
    creditStatus: defineAsyncComponent(() =>
      import('../modules/creditStatus.vue')
    ),
    agentCreditSetting: defineAsyncComponent(() =>
      import(
        '@CRM/views/commonView/creditManagement/modules/agentCreditSetting.vue'
      )
    ),
  },
  setup() {
    const router = useRouter()
    const currentInstance = getCurrentInstance()
    const api = inject('api')
    const creditSettingRef = ref(null)
    const data = reactive({
      mode: 'agent',
      listData: [],
      total: 0,
      filterData: {
        creditType: 'agent',
        creditStatus: '0',
        keyWord: '',
        headId: undefined,
        page: 1,
        pageSize: 20,
      },
      creditStatusOptions:
        crmStore.getters['dictionary/getDictionary']['credit_status'],
      rowData: null,
    })

    // 单机表格
    const rowClick = (row, column, event) => {
      console.log(row, column, event)
      if (column.label === '操作') return
      router.push({
        name: 'agentCreditDetail',
        query: {
          id: row.id,
        },
      })
    }

    // 鼠标样式
    const cellStyle = () => {
      return 'cursor:pointer;'
    }

    const handlList = () => {
      api.internalControl
        .INTERNAL_CONTROL_FINANCE_CREDIT_LIST(data.filterData)
        .then((res) => {
          if (res.code === 0) {
            data.listData = res.data.list || []
            data.total = res.data.total
          }
        })
    }
    const creditBtn = (flowStatus) => {
      var bool = false
      if (flowStatus === 'DOING') {
        currentInstance.proxy.customMessage({
          type: 'warning',
          message: '您的信用正在审核，暂不支持调整',
        })
        bool = true
      }
      return bool
    }
    const creditSetting = (row) => {
      var types = 'create'
      data.rowData = row
      // 判断是否可以调整信用
      if (row.creditInfo === null) {
        types = 'create'
      } else {
        var bool = creditBtn(row.creditInfo.flowStatus)
        if (row.creditInfo.creditStatus === '-1') {
          if (!bool) {
            types = 'edit'
          } else {
            return
          }
        } else if (row.creditInfo.creditStatus === '1') {
          if (!bool) {
            types = 'change'
          } else {
            return
          }
        } else {
          currentInstance.proxy.customMessage({
            type: 'warning',
            message: '你暂时不符合信用调整的条件',
          })
          return
        }
      }
      creditSettingRef.value.open({
        types: types,
        modeId: row.id,
        creditDetail: row.creditInfo,
      })
    }
    const officeClerkClear = () => {
      data.queryParams.headId = undefined
    }
    const creditStatusClear = () => {
      data.filterData.creditStatus = '0'
      handlSearch()
    }
    // 搜索
    const handlSearch = () => {
      data.filterData.page = 1
      handlList()
    }

    // 重置
    const handlReset = () => {
      data.filterData = {
        creditType: 'agent',
        creditStatus: '0',
        keyWord: '',
        headId: undefined,
        page: 1,
        pageSize: 20,
      }
      handlList()
    }

    onMounted(() => {
      handlList()
    })

    return {
      creditSettingRef,
      ...toRefs(data),
      handlList,
      handlSearch,
      handlReset,
      officeClerkClear,
      creditSetting,
      rowClick,
      cellStyle,
      creditStatusClear,
    }
  },
}
</script>

<style lang="scss" scoped>
</style>
